import React, { useState } from 'react'
import { useReducer } from 'react'


function reducer(state, action){
    switch(action.type){
        case 'addCount':
            return {
                ...state,
                count:state.count + 1
            }
        case 'decCount':
            return {
                ...state,
                count:state.count - action.payload
            }
        case 'changeMsg':
            return {
                ...state,
                msg:state.msg + '!'
            }
        default:
            throw new Error('xxxx')
    }
}
export default function App() {
    let [state, dispatch] = useReducer(reducer, {count:1, msg:'atguigu'})

    return (
        <div>
            <p>count: {state.count}</p>
            <p>msg: {state.msg}</p>
            <p><button onClick={()=>{
                dispatch({type:'addCount'})
            }}>count++</button></p>

            <p><button onClick={()=>{
                dispatch({type:'decCount', payload:3})
            }}>count-3</button></p>

            <p><button onClick={()=>{
                dispatch({type:'changeMsg'})
            }}>msg + '!'</button></p>
        </div>
    )
}
